A dynamically updating Line chart showing values for the last 10 minutes (1 per second)

Note Because Chrome slows down timers when it's in the background - this chart can occassionally miss out X values when the browser is in the background or is minimised. So for that reason - if you're running this, or another timer based updating chart, then you're advised to use a browser other than Chrome (or if in Chrome keep it in the foregound).

Current seconds:

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="800" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    function format (value)
    {
        value = String(value);

        if (value.length === 1) {
            value = '0' + value;
        }
        
        return value;
    }

    var lastnumber  = 50;
    var chart       = null;
    var data        = [];
    var labels      = [];

    /**
    * Make the array of empty values
    */
    for (var i=0; i<600; i+=1) {
        data[i] = [];
        labels[i] = '';
    }










        // Make and draw the chart
        var line = new RGraph.Line({
            id: 'cvs',
            data: [],
            options: {
                ymax: 100,
                backgroundGridAutofitNumvlines: 10,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                numxticks: 10,
                tickmarks: null,
                labels: labels,
                noaxes: true,
                textSize: 16,
                gutterLeft: 50,
                textColor: '#aaa',
                scaleZerostart: true,
                textAccessible: true
            }
        }).draw();





    /**
    * The draw() function gets called repeatedly every second
    */
    function draw()
    {
        var d = new Date();
        var seconds = d.getSeconds();


        // Reset the canvas
        RGraph.reset(document.getElementById('cvs'));


    
        /**
        * Add the label
        */
        if (parseInt(seconds) === 0) {
            labels.unshift(format(d.getHours()  ) + ':' + format(d.getMinutes()));
            labels.pop();
        } else {
            labels.unshift('');
            labels.pop();
        }





    
        // Add a new value to the chart data
        var random  = RGraph.random(-5,5);
    
        /**
        *  Create the random value
        */
        lastnumber = lastnumber + random;
        lastnumber = Math.max(0, lastnumber);
        lastnumber = Math.min(100, lastnumber);
        data[0] = lastnumber
        data.unshift(null);
        data.pop();
        line.original_data[0] = data;
        
        line.draw();



        // Update the counter
        document.getElementById('numvalues').innerHTML = d.getSeconds();
    
        // Call this function again in one seconds time
        // 
        // TODO Could change things so that the function runs 4 times a second (though only updates the chrt once persecond)
        //      Might be a little more accurate. It would be a significant change though
        setTimeout(draw, 1000);
    }
    
    draw();
</script>